<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宠物详情</title>
    <link rel="stylesheet"
          href="semantic_files/semantic/dist/semantic.min.css">

    <script src="css/jquery-3.1.1.min.js"></script>

    <script src="semantic_files/semantic/dist/semantic.min.js"></script>

    <script src="css/vue.min.js"></script>

    <script src="css/axios.min.js"></script>
</head>
<body>
<div id="app">

    <div class="ui bottom attached segment pushable">
        <!--侧边栏-->
        <div class="ui visible inverted left vertical sidebar menu" style="background: #8a8a8a">
            <img src="images/index/logo.png" width="220px">
            <a class="item">
                <i class="home icon"></i>
                主页
            </a>
            <a class="item">
                <i class="block layout icon"></i>
                领养
            </a>
            <a class="item">
                <i class="smile icon"></i>
                寄养
            </a>
            <a class="item">
                <i class="calendar icon"></i>
                捐赠支持
            </a>
            <a class="item">
                <i class="calendar icon"></i>
                联系我们
            </a>
        </div>
        <!--右边内容-->
        <div class="pusher">
            <div class="ui left aligned striped segment">
                <div class="ui middle aligned stackable grid container" style="height: 600px;">

                    <div class="six wide left floated column">
                        <img :src="pet.imga" class="ui large bordered rounded image">
                    </div>

                    <div class="six wide left floated column">
                        <div class="grid">
                            <div class="row">
                                <div class="ui header"><a style="font-size: medium">我的名字：</a>
                                    {{pet.pname}}
                                </div>
                                <div class="ui header"><a style="font-size: medium">年&emsp;龄：</a>
                                    {{petAge}} 天
                                </div>
                                <div class="ui header"><a style="font-size: medium">性&emsp;别：</a>
                                    {{petSex}}
                                </div>
                                <div class="ui header"><a style="font-size: medium">品&emsp;种：</a>
                                    {{type}}
                                </div>

                                <div class="ui large secondary button" style="margin-top: 50px">我要领养</div>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="eight wide left floated column" style="margin-left:200px;margin-bottom: 50px">
                    <div class="ui header"><a style="font-size: medium">详细描述:</a>

                    </div>

                    <div class="ui header">
                        {{pet.desp}}
                    </div>

                </div>

            </div>



        </div>
    </div>

</div>
</body>
<script>

    var ue = new Vue({
        el: "#app",
        data: {
            id: '',
            pet: '',
            type: '',
            petAge: '',
            petSex: '',
            petBirth:''
        },
        mounted: function () {
            this.getNowTime()
            this.getInfo()
        },
        methods: {
            //从地址栏获取key为name的value值的方法
            getUrlKey: function (name) {
                return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
            },
            //获取当前日期
            getNowTime: function (str) {
                let nowDate = new Date();
                let y = nowDate.getFullYear();
                let m = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;
                let d = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
                if(str != null){
                    return y + str + m + str + d
                }else{
                    return y + "年" + m + "月" + d + "日"
                }
            },

            //获取两日期的差值并赋值
            getDifferentialValForDate(startDay, endDay) {
                // console.log("startDay is" + startDay)
                // console.log("endDay is" + endDay)
                return Math.abs(parseInt((new Date(endDay).getTime() - new Date(startDay).getTime()) / (1000 * 60 * 60 * 24)));
            },
            //获取宠物信息的ajax请求
            getInfo: function () {
                this.id = parseInt(this.getUrlKey("pid"))
                axios.get("getPetInfo", {
                        params: {
                            pid: this.id
                        }
                    }
                ).then(function (response) {
                    let nowTime = ue.getNowTime("-");
                    ue.pet = response.data
                    //进行生日转换
                    ue.petBirth = response.data.pbirth
                    ue.petAge = ue.getDifferentialValForDate(ue.petBirth, nowTime)
                    //获取宠物类别名称
                    axios.get("getPetType", {
                        params: {
                            ptid: ue.pet.ptid
                        }
                    }).then(function (response) {
                        ue.type = response.data
                    })
                    //转换宠物性别
                    switch (ue.pet.psex) {
                        case 1:
                            ue.petSex = "公（未绝育）"
                            break
                        case 2:
                            ue.petSex = "母（未绝育）"
                            break
                        case 3:
                            ue.petSex = "公（已绝育）"
                            break
                        case 4:
                            ue.petSex = "母（未绝育）"
                            break
                        default:
                            ue.petSex = "其他"
                            break
                    }
                })
            },
        }
    })

</script>
</html>